<template>
  <div class="tapContainer clearfix">
    <div class="tapBox">
      <div class="title clearfix">
        <span>{{ titleNav.folMsg }}</span>
      </div>
      <div class="tapContent">
        <div class="taps">
          <div class="navTap" @click="navTap">
            <span data-id="1"
             v-if="titleNav.folMsg === '消息中心' ? true : false"
              :class="flag === '1' ? 'action' : ''"
              >{{titleNav.navFolMsg1}}</span>
            <span v-else
             data-id="1"
             :class="flag === '1' ? 'action' : ''"
             >{{titleNav.navFolMsg1}}(0人)</span>
            <span
              v-if="titleNav.folMsg === '消息中心' ? true : false"
              data-id="2"
              :class="flag === '2' ? 'action' : ''"
            >
              {{ titleNav.navFolMsg2 }}</span
            >
            <span
              v-else
              data-id="2"
              :class="flag === '2' ? 'action' : ''"
              >{{ titleNav.navFolMsg2 }}({{ userData.length }}人)</span
            >
          </div>
          <NavMessages
            :flag="flag"
            v-if="titleNav.folMsg === '消息中心' ? true : false"
          />
          <NavFollow :flag="flag" v-else />
        </div>
      </div>
    </div>
    <div class="tapRight">
      <div class="info">
        <div class="avatar">
          <div class="head"></div>
        </div>
        <div class="nickName">{{ myName }}</div>
        <div class="tags">
          <span class="span1"></span>
          <span class="span2"></span>
          <span class="span3"></span>
        </div>
        <div class="box">
          <div class="boxItem">
            <span class="text">关注我的</span>
            <span class="counts">0</span>
          </div>
          <div class="boxItem">
            <span class="text">消息</span>
            <span class="counts">1</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavMessages from "@/components/NavMessages";
import NavFollow from "@/components/NavFollow";
import { mapState } from "vuex";
export default {
  name: "TapMessage",
  props: ["titleNav"],
  data() {
    return {
      flag: "1",
      myName: "",
    };
  },
  methods: {
    navTap(e) {
      //console.log(e.target.dataset);
      if (e.target.dataset.id === "1") {
        this.flag = "1";
      } else if (e.target.dataset.id === "2") {
        this.flag = "2";
      }
    },
  },
  components: {
    NavMessages,
    NavFollow,
  },
  computed:{
      ...mapState({
      userData: (state) => state.search.userData,
    }),
  },
  mounted() {},
};
</script>

<style lend="stylus">
.tapContainer {
  padding: 100px 0px 0px;
  width: 1200px;
  margin: 0 auto;
}
/* Tap框 */
.tapContainer .tapBox {
  float: left;
  width: 880px;
  margin: 0px 30px 0px 0px;
}
.tapContainer .tapBox .title {
  position: relative;
  height: 60px;
  padding-left: 30px;
  border-radius: 6px 6px 0 0;
  border: 1px solid #ebebeb;
  border-bottom: none;
  font-weight: 700;
  background: #fff;
}
.tapContainer .tapBox .title span {
  line-height: 16px;
  position: absolute;
  top: 50%;
  padding-left: 8px;
  border-left: 4px solid #a187f9;
  margin-top: -8px;
  font-size: 16px;
  vertical-align: bottom;
}
.tapContainer .tapBox .tapContent {
  font-size: 14px;
  background: #fff;
  border-radius: 0 0 6px 6px;
  border: 1px solid #ebebeb;
}
.tapContainer .tapBox .tapContent .navTap {
  height: 46px;
  padding-left: 42px;
  margin-bottom: 2px;
}
.tapContainer .tapBox .tapContent .navTap span {
  display: inline-block;
  line-height: 46px;
  text-align: center;
  margin-right: 60px;
  font-weight: 400;
  white-space: pre;
  color: #666;
  cursor: pointer;
  box-sizing: border-box;
}
.tapContainer .tapBox .tapContent .navTap span.action {
  border-bottom: 2px solid #8b76f9;
  color: #8b76f9;
}

/* 右边信息框 */
.tapContainer .tapRight {
  width: 290px;
  float: right;
}
.tapContainer .tapRight .info {
  width: 290px;
  height: 387px;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
  color: #666;
  background: #fff;
}
.tapContainer .tapRight .avatar {
  cursor: pointer;
  margin-top: 24px;
  margin-bottom: 11px;
}
.tapContainer .tapRight .avatar .head {
  background-image: url("../../assets/images/touXiang.png");
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  /* background-repeat: no-repeat; */
  background-size: 100% 100%;
}
.tapContainer .tapRight .nickName {
  min-height: 25px;
  margin-bottom: 7px;
  word-break: break-all;
  line-height: 25px;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  cursor: pointer;
}
.tapContainer .tapRight .tags {
  padding-left: 6px;
}
.tapContainer .tapRight .tags span {
  display: inline-block;
  margin-right: 8px;
  background-size: 100% 100%;
  width: 18px;
  height: 18px;
}
.tapContainer .tapRight .tags .span1 {
  background-image: url(../../assets/images/crown.png);
}
.tapContainer .tapRight .tags .span2 {
  background-image: url(../../assets/images/star.png);
}
.tapContainer .tapRight .tags .span3 {
  background-image: url(../../assets/images/proof.png);
}
.tapContainer .tapRight .box {
  width: 210px;
  margin-left: 30px;
  margin-top: 50px;
}
.tapContainer .tapRight .box .boxItem {
  font-size: 14px;
  height: 20px;
  margin-bottom: 32px;
  cursor: pointer;
}
.tapContainer .tapRight .box .boxItem .text {
  float: left;
}
.tapContainer .tapRight .box .boxItem .counts {
  float: right;
  width: 26px;
  text-align: right;
  line-height: 17px;
}
</style>
